<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <div class="formSolution-center">
            <div class="rx-monaco-editor-left">
                <a-tree
                    class="draggable-tree"
                    :tree-data="gData"
                    :show-icon="true"
                    @select="insertField"
                >
                    <my-icon style="color: #1890ff" slot="string" type="iconField-String"></my-icon>
                    <my-icon style="color: #1890ff" slot="varchar" type="iconField-String"></my-icon>
                    <my-icon style="color: #1890ff" slot="number" type="iconshuzi"></my-icon>
                    <my-icon style="color: #1890ff" slot="int" type="iconshuzi"></my-icon>
                    <my-icon style="color: #1890ff" slot="date" type="iconriqi"></my-icon>
                    <my-icon style="color: #1890ff" slot="children" type="iconfile-folder-open-fill"></my-icon>
                </a-tree>
            </div>
            <div class="rx-monaco-editor-center" style="padding: 10px;box-sizing: border-box;height: 100%;">
                <div style="height: 100%;">
                    <rx-monaco-editor
                            ref="bodyScript"
                            v-model="val"
                            language="java"
                    >
                        <template v-slot:monacoeditor>
                            <a-button type="primary" style="margin-left: 8px"  @click="insertCode()">{{$ti18("showConf.insertCode","插入循环代码","formCellRender")}}</a-button>
                            <span style="padding-left: 10px"></span>
                            <a-button icon="edit" @click="showScriptDialog()">

                                {{$ti18("showConf.quickScript","快速脚本","formCellRender")}}
                            </a-button>
                            <rx-constant-field @select="insertConst"></rx-constant-field>
                            <a-tooltip style="margin-left: 8px"  placement="rightTop">
                                <template slot="title">
                                    <span>{{$ti18('showConf.help','当前代码为java代码,其中 main为列表字段某一行的数据，rows为关联表根据条件查出的所有数据','formCellRender')}}</span>
                                </template>
                                <a-icon type="question-circle" />
                            </a-tooltip>
                        </template>
                    </rx-monaco-editor>
                </div>
            </div>
        </div>
    </rx-dialog>
</template>

<script>

    import {Util,RxLayout,RxDialog,RxFit,RxMonacoEditor,Dialog} from "@lowcode/jpaas-common-lib"
    export default {
        name: "ShowConfDialog",
        components: {
            RxDialog,
            RxMonacoEditor
        },
        props: {
            layerid: {
                type: String,
                default: ""
            },
            script: {
                type: String,
                default: ""
            },
            destroy: {
                type: Function
            },
            mainField:{
                type:Array
            },
            relField:{
                type:Array
            }

        },
        data() {
            return {
                 val:this.script,
                gData:[]
            }
        },
        created(){
            var main={
                title: this.$ti18("showConf.mainField","列表字段","formCellRender"),
                key:"main",
                scopedSlots:{icon:"children"},
                children:[]

            }
            var children=[]
            for (var field of this.mainField){
                children.push({title:field.label, key:field.value,scopedSlots:{icon: field.key}})
            }
            main.children=children
            this.gData.push(main)

            var rel={
                title: this.$ti18("showConf.relField","关联表字段","formCellRender"),
                key:"rel",
                scopedSlots:{icon:"children"},
                children:[]
            }
            var relChildren=[];
            for (let field of this.relField){
                relChildren.push({title:field.label, key:field.value,scopedSlots:{icon: field.dataType}})
            }
            rel.children=relChildren;
            this.gData.push(rel)
        },
        mounted(){
            if (!this.val){
                this.$refs.bodyScript.insertContent("//"+this.$ti18("showConf.tips","注意：关联表字段需在循环代码中使用","formCellRender"));
            }
        },
        methods: {
            handleSubmit() {
                Util.closeWindow(this,"ok")
            },
            cancel() {
                Util.closeWindow(this,"cancel")
            },
            getScripts(){
                return this.val;
            },
            insertScript(){
              let config={curVm:this};
              let self_=this;
              Dialog.openScriptDialog(config,function (script){
                self_.$refs.bodyScript.insertContent(script);
              })
            },
            insertCode(){
                var script=
    `import java.util.Map;
    //返回结果需要根据字段的类型决定
    String result="";
    //rows是关联查询返回的结果
    for(int i=0;i<rows.size;i++){
       Map row=rows[i];
       //选择需要计算的关联表字段
          result+=row.关联表的字段;
    }
    return result;`  ;
                this.$refs.bodyScript.insertContent(script);
            },
            insertField(selectedKeys,e){
                let node = e.node.dataRef;
                var parentNode = e.node.$parent.dataRef;
                var field=""
                if (!parentNode){
                    return
                }
                if (parentNode.key=='main'){
                    field+="main."+node.key;
                }else {
                    field+= node.key;
                }
                this.$refs.bodyScript.insertContent(field);
            },
            insertConst(val){
                this.$refs.bodyScript.insertContent(val);
            },
            showScriptDialog(){
                let self=this;
                let config={curVm:this};
                Dialog.openScriptDialog(config,function (script){
                    self.$refs.bodyScript.insertContent(script);
                })

            },
        }
    }
</script>

<style scoped>
.formSolution-center {
    height: 100%;
    display: flex;
    flex: 1;
    overflow: hidden;
}
.rx-monaco-editor-center {
    flex: 3;
    display: flex;
    flex-direction: column;
}
.rx-monaco-editor-left {
    flex: 1;
    overflow: auto;
}
</style>
